<!--**
 * forked from：https://github.com/F-loat/mpvue-wxParse
 *
 * github地址: https://github.com/dcloudio/uParse
 *
 * for: uni-app框架下 富文本解析
 * 
 * 优化 by zhiqiang.feng@qq.com
 */-->

<template>
	<!--基础元素-->
	<view class="wxParse" :class="className" :style="'user-select:' + userSelect">
			<block v-for="(node, index) of nodes" :key="index" v-if="!loading">
				<wxParseTemplate :node="node" :nickname="nickname" :avatar="avatar" :buttontext="buttontext"
					:showbutton="showbutton" :avatarurl="avatarurl" :avatarurl2="avatarurl2" />
			</block>
			
	</view>
</template>

<script>
	import HtmlToJson from './libs/html2json';
	import wxParseTemplate from './components/wxParseTemplate0';

	export default {
		name: 'wxParse',
		props: {
			// user-select:none;
			userSelect: {
				type: String,
				default: 'text' //none |text| all | element
			},
			imgOptions: {
				type: [Object, Boolean],
				default: function() {
					return {
						loop: false,
						indicator: 'number',
						longPressActions: false
					}
				}
			},
			loading: {
				type: Boolean,
				default: false
			},
			className: {
				type: String,
				default: ''
			},
			avatarurl: {
				type: String,
				default: ''
			},
			avatarurl2: {
				type: String,
				default: ''
			},
			nickname: {
				type: String,
				default: '123'
			},
			avatar: {
				type: String,
				default: ''
			},
			buttontext: {
				type: String,
				default: ''
			},
			showbutton: {
				type: String,
				default: ''
			},
			content: {
				type: String,
				default: ''
			},

			noData: {
				type: String,
				default: ''
			},

			startHandler: {
				type: Function,
				default () {
					return node => {
						node.attr.class = null;
						node.attr.style = null;
					};
				}
			},

			endHandler: {
				type: Function,
				default () {
					return node => {
						node = node
					};
				}
			},
			charsHandler: {
				type: Function,
				default () {
					return node => {
						node = node
					};
				}
			},
			imageProp: {
				type: Object,
				default () {
					return {
						mode: 'aspectFit',
						padding: 0,
						lazyLoad: false,
						domain: ''
					};
				}
			}
		},
		components: {
			wxParseTemplate
		},
		data() {
			return {
				nodes: {},
				// avatarurl:'',
				// nickname:'',
				imageUrls: [],
				wxParseWidth: {
					value: 0
				},
				showAll:'limetHeight' // freeHeight   limetHeight
			};
		},
		computed: {},
		mounted() {
			this.setHtml()
			
		},

		methods: {
			setHtml() {
				const that = this;
				this.getWidth().then((data) => {
					this.wxParseWidth.value = data;
				})
				let {
					content,
					noData,
					imageProp,
					startHandler,
					endHandler,
					charsHandler,
					avatarurl,
					avatarurl2,
					nickname,
				} = this;

				this.avatarurl = avatarurl;
				this.avatarurl2 = avatarurl2;
				this.nickname = nickname;

				let parseData = content || noData;

				let customHandler = {
					start: startHandler,
					end: endHandler,
					chars: charsHandler
				};
				let results = HtmlToJson(parseData, customHandler, imageProp, this);

				this.imageUrls = results.imageUrls;
				// this.nodes = results.nodes;

				this.nodes = [];

				for (var i = 0; i < results.nodes.length; i++) {
					let row = results.nodes[i]
					if (row) {
						if (row.tag) {
							that.nodes.push(row)
						}
					}
				}

			},
			getWidth() {
				return new Promise((res, rej) => {
					// #ifndef MP-ALIPAY || MP-BAIDU
					uni.createSelectorQuery()
						.in(this)
						.select('.wxParse')
						.fields({
								size: true,
								scrollOffset: true
							},
							data => {
								res(data.width);
							}
						).exec();
					// #endif
					// #ifdef MP-BAIDU
					const query = swan.createSelectorQuery();
					query.select('.wxParse').boundingClientRect();
					query.exec(obj => {
						const rect = obj[0]
						if (rect) {
							res(rect.width);
						}
					});
					// #endif
					// #ifdef MP-ALIPAY
					my.createSelectorQuery()
						.select('.wxParse')
						.boundingClientRect().exec((ret) => {
							res(ret[0].width);
						});
					// #endif
				});
			},
			navigate(href, $event, attr) {
				console.log(href, attr);
				this.$emit('navigate', href, $event);
			},
			preview(src, $event) {
				if (!this.imageUrls.length || typeof this.imgOptions === 'boolean') {

				} else {
					uni.previewImage({
						current: src,
						urls: this.imageUrls,
						loop: this.imgOptions.loop,
						indicator: this.imgOptions.indicator,
						longPressActions: this.imgOptions.longPressActions
					});
				}
				this.$emit('preview', src, $event);
			},
			removeImageUrl(src) {
				const {
					imageUrls
				} = this;
				imageUrls.splice(imageUrls.indexOf(src), 1);
			},
		},
		// 父组件中提供
		provide() {
			return {
				parseWidth: this.wxParseWidth,
				parseSelect: this.userSelect
				// 提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。
			};
		},
		watch: {
			content(val) {
				this.setHtml()
			}
		}
	};
</script>
